import React, { useEffect, useMemo, useRef, useState } from "react";
import { useNavigate, useParams } from "react-router-dom";
import request from "../../api/request";
import style from "./index.module.css";
import Navbar from "../../compoents/Navbar";
import eyes from "../../assets/twoeyes03.jpg";
import messa from '../../assets/text03.jpg'
import { LikeOutline,StarOutline } from 'antd-mobile-icons'
function Index() {
  const { id } = useParams();
  console.log("患者id", id);
  const navigate = useNavigate();

  const [anliList, setAnliList] = useState([]);
  const [num1,setNum1] = useState(15)
  const [num2,setNum2] = useState(25)
  const [liked,setLiked] = useState(false)
  const [starred,setStarred] = useState(false)
  const [isCompact, setIsCompact] = useState(false)
  const scrollRafRef = useRef<number | null>(null)

  const getAnliList = async () => {
    const res = await request.get("/api/book/detail", {
      params: {
        id,
      },
    });
    console.log("患者详情", res);
    if (res.code === 20000) {
      setAnliList(res.data);
    }
  };

  useEffect(() => {
    getAnliList();
  }, []);
  
  // 滚动收起导航并显示标题（与首页一致的处理）
  useEffect(() => {
    const THRESHOLD = 80
    const onScroll = () => {
      if (scrollRafRef.current !== null) return
      scrollRafRef.current = window.requestAnimationFrame(() => {
        scrollRafRef.current = null
        const y = window.scrollY || document.documentElement.scrollTop || 0
        setIsCompact(y > THRESHOLD)
      })
    }
    window.addEventListener('scroll', onScroll, { passive: true })
    onScroll()
    return () => {
      window.removeEventListener('scroll', onScroll)
      if (scrollRafRef.current !== null) {
        window.cancelAnimationFrame(scrollRafRef.current)
        scrollRafRef.current = null
      }
    }
  }, [])

  // 当前文章标题（用于紧缩时显示在导航栏）
  const navbarTitle = useMemo(() => {
    if (anliList.length === 0) return ''
    const first: any = anliList[0]
    const text: string = first?.socodescword || first?.texttitle || ''
    return (text || '').substring(0, 32)
  }, [anliList])
  return (
    <div>
      <Navbar showBack onBack={() => navigate(-1)} title={isCompact ? navbarTitle : ''} />

      <div className={style.artcontent}>
        {anliList.length > 0 &&
          anliList.map((item, index) => (
            <div key={index}>
              <p className={style.headtext}>
                {item.socodescword?.substring(0, 32)}
              </p>
              <h2 className={style.texth2}>
                {item.socodescword?.substring(0, 32)}
              </h2>

              <div className={style.imgname}>
                <img src={item.doctorimage} alt="" />
                <div>
                  <div>
                    <span className={style.name}>{item.doctorname}</span>
                    <span className={style.doctor}>{item.doctorstate}</span>
                  </div>
                  <span className={style.hosp}>{item.nosocomium}</span>
                </div>
              </div>

              <div className={style.spanbox}>
                <div className={style.spanboxleft}>
                  <img src={eyes} alt="" />
                  <span className={style.spaneyes}>
                    {item.doctoradministre}
                  </span>
                </div>

                <span className={style.sparight}>{item.socoadmin}＞</span>
              </div>

              <div className={style.eyybox}>
                <div className={style.span1}>
                  <span className={style.topleft}>疾病</span>
                  <span className={style.topright}>
                    {item.doctoradministre}
                  </span>
                </div>

                <div className={style.span2}>
                  <span className={style.bottomleft}>症状</span>
                  <span className={style.bottomright}>{item.nosocomium}</span>
                </div>

                <div className={style.wenz1}>
                  <h3>一、</h3>
                  <p>{item.textdise}</p>
                  <div className={style.nam2}>
                    [{item.doctorname}] <p>女，年28岁</p>
                  </div>
                  <p>{item.doctordescword}</p>
                  <p>{item.socodescword}</p>
                </div>

                <div className={style.wenz1}>
                  <h3>二、</h3>
                  <p>{item.textdise}</p>
                  <div className={style.nam2}>
                    [{item.doctorname}] <p>女，年28岁</p>
                  </div>
                  <p>{item.textdescword}</p>
                  <p>{item.socodescword}</p>
                  <img className={style.imgquan} src={item.textimage} alt="" />
                </div>

                <div className={style.wenz1}>
                  <h3>三、</h3>
                  <p>{item.textdise}</p>
                  <div className={style.nam2}>
                    [{item.doctorname}] <p>女，年28岁</p>
                  </div>
                  <p>{item.textdescword}</p>
                  <p>{item.socodescword}</p>
                  <img className={style.imgquan} src={item.textimage} alt="" />
                </div>

                <div className={style.wenz1}>
                  <h3>四、</h3>
                  <p>{item.doctordescword}</p>
                  <div className={style.nam2}>
                    [{item.doctorname}] <p>女，年28岁</p>
                  </div>
                  <p>{item.textdescword}</p>
                  <p>{item.socodescword}</p>
                  <img className={style.imgquan} src={item.textimage} alt="" />
                </div>

                <div className={style.dibu}>
                  <div className={style.gn}>
                    <span
                      className={`${style.gn1} ${liked ? style.active : ""}`}
                      onClick={(e)=>{ e.stopPropagation(); setLiked(!liked); setNum1(prev=> prev + (liked ? -1 : 1)); }}
                    >
                      <LikeOutline />{num1}
                    </span>
                    <span
                      className={`${style.gn1} ${starred ? style.active : ""}`}
                      onClick={(e)=>{ e.stopPropagation(); setStarred(!starred); setNum2(prev=> prev + (starred ? -1 : 1)); }}
                    >
                      <StarOutline />{num2}
                    </span>
                  </div>

                  <img className={style.imgmess} src={messa} alt="" />

                </div>
              </div>
            </div>
          ))}
      </div>
      
    </div>
  );
}

export default Index;
